
<template>
	<div class="risk-content">

		<div>
			<van-tabs  @click="onClick">
			  <van-tab v-for="(item,index) in tabList" :title="item.OrgPostName" :name="item.OrgPostCode" :key="index">
  			<van-list
				style="margin: 10px"
			>
				<div class="plan-list">
					<div
						class="plan-detail mb-10"
						v-for="(item, index) in list"
						:key="index"
						@click="_goDetail(item)"
					>
						<div class="plan-history-hd">
							<van-image
								width="60px"
								height="60px"
								class="van-images"
								fit="cover"
								:src="baseUrl+item.Cover"
							/>
							<div class="mt-5 plan-detail-r">
								<div class="plan-detail-title mb-10">{{ item.ResName }}</div>
								<div class="plan-detail-time">
									简介：{{ item.Introduce || '暂无描述' }}
								</div>
								<div class="current-progress mt-10">
									<van-progress
										style="width: 85%"
										:show-pivot="false"
										:percentage="item.CurrentProgress"
										:color="item.CurrentProgress == 100 ? '#07c160' : '#1989fa'"
									/>
									<div>{{ item.CurrentProgress }}%</div>
								</div>
							</div>
						</div>

						<van-tag type="primary" class="tags">{{ item.AttExt }}</van-tag>
					</div>
				</div>
			</van-list>
  </van-tab>
  </van-tabs>
			<!-- <van-tabs v-model="active" @change="changeTabs">
				<van-tab title="经理" >
			<van-list
				style="margin: 10px"
				:finished="finished"
				v-model="loading"
				finished-text="没有更多了"
				@load="onLoad"
			>
				<div class="plan-list">
					<div
						class="plan-detail mb-10"
						v-for="(item, index) in list"
						:key="index"
						@click="_goDetail(item)"
					>
						<div class="plan-history-hd">
							<van-image
								width="60px"
								height="60px"
								class="van-images"
								fit="cover"
								:src="baseUrl+item.Cover"
							/>
							<div class="mt-5 plan-detail-r">
								<div class="plan-detail-title mb-10">{{ item.ResName }}</div>
								<div class="plan-detail-time">
									简介：{{ item.Introduce || '暂无描述' }}
								</div>
								<div class="current-progress mt-10">
									<van-progress
										style="width: 85%"
										:show-pivot="false"
										:percentage="item.CurrentProgress"
										:color="item.CurrentProgress == 100 ? '#07c160' : '#1989fa'"
									/>
									<div>{{ item.CurrentProgress }}%</div>
								</div>
							</div>
						</div>

						<van-tag type="primary" class="tags">{{ item.AttExt }}</van-tag>
					</div>
				</div>
			</van-list>
				</van-tab>
					<van-tab title="主管（兼职岗位）" >
			<van-list
				style="margin: 10px"
				:finished="finished"
				v-model="loading"
				finished-text="没有更多了"
				@load="onLoad"
			>
				<div class="plan-list">
					<div
						class="plan-detail mb-10"
						v-for="(item, index) in list"
						:key="index"
						@click="_goDetail(item)"
					>
						<div class="plan-history-hd">
							<van-image
								width="60px"
								height="60px"
								class="van-images"
								fit="cover"
									:src="baseUrl+item.Cover"
							/>
							<div class="mt-5 plan-detail-r">
								<div class="plan-detail-title mb-10">{{ item.ResName }}</div>
								<div class="plan-detail-time">
									简介：{{ item.Introduce || '暂无描述' }}
								</div>
								<div class="current-progress mt-10">
									<van-progress
										style="width: 85%"
										:show-pivot="false"
										:percentage="item.CurrentProgress"
										:color="item.CurrentProgress == 100 ? '#07c160' : '#1989fa'"
									/>
									<div>{{ item.CurrentProgress }}%</div>
								</div>
							</div>
						</div>

						<van-tag type="primary" class="tags">{{ item.AttExt }}</van-tag>
					</div>
				</div>
			</van-list>
				</van-tab>
			</van-tabs> -->
		</div>
	</div>
</template>

<script>
import { list, getTabs } from '@/api/muststudy'
import { getDate } from '@/utils/getDate.js'

export default {
	data() {
		return {
			active:0,
			baseUrl: process.env.VUE_APP_BASE_API,
			Value: '',
			filter: {
				orgPostCode:'BG19013000002'
			},
			list: [],
			tabList: [],
			finished: false,
			loading: false,
			CurrentProgress: 60,
		}
	},

	created() {
           this.getTabs()
		//this.getList()
	},
	methods: {
		changeTabs(val) {
			switch (val) {
				case 0:
				
					this.filter.orgPostCode = 'BG19013000002'
					this.getList()
					break
				case 1:
					this.filter.orgPostCode = 'BG19013000001'
				
					this.getList()
					break
			
			}
		},

		   onClick(name, title) {
			   this.filter.orgPostCode = name
			   this.getList()
// console.log('asdad',name);    
},



		getTabs() {
			this.loading = true
			getTabs().then((res) => {
				this.tabList = res.data
					if(this.tabList.length>0) {
                  this.filter.orgPostCode = this.tabList[0].OrgPostCode
				  this.getList()
			}
				
				})

	
		

		
		},
		getList() {
			this.loading = true
			list(this.filter).then((res) => {
				this.loading = false
					res.data.forEach((item) => {
					item.AttExt = item.AttExt.toUpperCase()
					item.AttExt = item.AttExt.substring(1, item.AttExt.length)
					item.CurrentProgress = parseInt(item.CurrentProgress)
				
				})
				this.list = res.data

			})
		},

		// 详情
		_goDetail(item) {
			var url =  "/Train/WareDetail?id=" + item.ResID + "&sid="+ item.SID +"&stype="+ item.SType;
			this.$router.push(url);
		},
	},
}
</script>

<style lang="less" scoped>
.risk-content {
	background-color: #e8f1f8;
	min-height: 100vh;
	.info_search {
		padding: 10px;
		border-radius: 5px !important;
		.van-field__control {
			background-color: #ffffff !important;
		}
	}
}

.plan-detail {
	width: 100%;
	background-color: #fff;
	border-radius: 8px;
	padding: 10px;
	color: #333;
	font-size: 10px;
	position: relative;
	.tags {
		position: absolute;
		top: 10px;
		right: 0;
		border-radius: 26.64rem 0 0 26.64rem;
	}
}

.plan-history-hd {
	display: flex;
	justify-content: space-between;
	// img {
	// 	width: 70px;
	// 	height: 70px;
	// 	margin-right: 10px;
	// }
	.plan-detail-title {
		font-size: 14px;
		color: #000;
	}
	span {
		color: #666;
	}
}
.van-images {
	box-shadow: 3px 3px 3px #ccc;
}
.plan-detail-time {
	font-size: 12px;
	color: #666;
}
.plan-detail-r {
	width: 260px;
}
.current-progress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
</style>